import * as echarts from '../../ec-canvas/echarts';
import store from '../../utils/store';
import { signChartApi } from '../../api/home';

Component({
  properties: {
    chartHeight: { type: Number, value: 0 },
    chartWidth: { type: Number, value: 0 },
    hideCanvas: { type: Boolean, value: true},
    ids: { type: Array, value: [] },
    activeDate: { type: String, value: 'week' }
  },
  data: {
    chartImage: '',
    lineEc: {
      lazyLoad: true, // 延迟加载，与 echarts-all 的 ecAll 隔离
      onInit: (canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, { width, height, devicePixelRatio: dpr });
        canvas.setChart(chart);
        return chart;
      }
    }
  },
  lifetimes: {
    ready() { // 替换 attached，统一初始化时机
      this.initEcharts();
    }
  },
  observers: {
    // 监听 trainDate 属性的变化
    'ids'(newData) {
      console.log('组件的 ids 已更新为:', newData);
      // 当 trainDate 变化时，自动重新初始化图表
      if (newData) { // 确保 newTrainDate 有效
        this.initEcharts();
      }
    },
    'activeDate'(newData) {
      console.log('组件的 activeDate 已更新为:', newData);
      // 当 trainDate 变化时，自动重新初始化图表
      if (newData) { // 确保 newTrainDate 有效
        this.initEcharts();
      }
    },
  },
  methods: {
    async initEcharts() {
      const ecComponent = this.selectComponent('#linesChart');
      if (!ecComponent) {
        console.error('ecg-chart：未找到 ec-canvas 实例');
        return;
      }
      await ecComponent.init(async (canvas, width, height, dpr) => {
        const chartList = await signChartApi({
          studentId: store.state.studentId,
          type: this.data.activeDate,
          indicatorIds: this.data.ids
        });
        console.log(chartList, 'chartList')
        const nameArr = chartList.name || [], lineSeries = [],
        lineXAxis = chartList.xAxis || []
        for (let index = 0; index < this.data.ids.length; index++) {
          lineSeries.push({
            name: nameArr[index],
            type: 'line',
            stack: 'Total',
            data: chartList[`series${index + 1}`]
          })
        }
        const myChart = echarts.init(canvas, null, {
          width: this.properties.chartWidth || width,
          height: this.properties.chartHeight || height,
          devicePixelRatio: dpr
        });
        myChart.setOption(this.getChartOption(nameArr, lineXAxis, lineSeries));
        wx.onWindowResize(() => myChart.resize());
        return myChart;
      });
    },
    getChartOption(nameArr,lineXAxis, lineSeries) {
      // 原配置逻辑保持不变...
      return {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: 'top',
          data: nameArr
        },
        grid: {
          left: '0%',
          right: '10%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: lineXAxis,
          axisLabel: {
            // 这里就是设置X轴文字倾斜的地方
            rotate: 30,          // 倾斜角度，负值表示逆时针
            interval: 0,         // 强制显示所有标签，0表示全部显示
            color: '#333',       // 文字颜色
            fontSize: 12         // 文字大小
          }
        },
        yAxis: {
          type: 'value'
        },
        series: lineSeries
      }
    },
    updateChart(ids) {
      this.setData({ ids });
    }
  }
});